<template>
  <div class="bod">
    <ul class="menu-one">
      <li v-for="item in list" :key="item.id"> <!-- 第一层 -->
        <p class="one-li border-bottom"><span class="NB"></span> {{item.title}}</p>
        <ul class="ul3">
          <li class="border-bottom" v-for="itemr of item.children" :key="itemr.id"> <!-- 第二层 -->
          <div>
            <div class="left">
              <div class="left-p1">
                <span class="span_left">{{itemr.xing}}</span>
                <span class="span_right">{{itemr.name}} &nbsp;&nbsp;&nbsp;{{itemr.time}}</span>
              </div>
              <p class="left-p2">{{itemr.title}}</p>
            </div>
          </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
'use strict'

export default {
  name: 'Detaxx',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .bod
    background-color #E4E7EA
    padding-bottom 0.06rem
  .menu-one
    background white
    margin-bottom 0.2rem
    .NB
      display: inline-block;
      position: absolute;
      width: .36rem;
      height: .36rem;
      top: .26rem;
      left: .2rem;
      background: url('')
      background-repeat: no-repeat;
      background-position: 0 center;
      text-indent: .36rem;
      margin-right: .1rem;
      background-size: .36rem .36rem;
    .one-li
      height 0.92rem
      line-height 0.92rem
      font-size 0.32rem
      padding-left 0.6rem
    .one-li2
      height 0.92rem
      line-height 0.92rem
      font-size 0.3rem
      padding-left 0.2rem
      position relative
      .li2
        color #9E9E9E
        position absolute
        right 0.2rem
        .li2-color
          color #FF9800
          .li2-size
            font-size 0.44rem
    .ul3
      overflow auto
      li
        overflow auto
      .left
        width 100%
        padding-left 0.2rem
        p
          padding-bottom 0.2rem
        .left-p1
          padding-top 0.2rem
          padding-bottom 0.2rem
          >.span_left
            color #FF9300
          >.span_right
            float right
            font-size 0.2rem
            padding-right 0.2rem
        .left-p2
          color #616161
          line-height 0.4rem
          img
            width 0.2rem
        .left-p3
          display: inline-block;
          padding: 0 .04rem;
          height: .32rem;
          color: #00afc7;
          font-size: .2rem;
          line-height: .32rem;
          white-space: nowrap;
      .right
        width 35%
        height 1.92rem
        float left
        display flex
        flex-direction column
        align-items center
        justify-content center
        .li2-color
          color #FF9800
          .li2-size
            font-size 0.44rem
        .right-span
          display inline-block
          width 80%
          text-align center
          padding 0.2rem 0
          background #FF9B17
          border-radius 0.1rem
          color white
</style>
